<template>
  <!-- 搜索按钮 -->

  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="input-group">
        <input
          type="text"
          class="form-control input-sm"
          placeholder=""
          value=""
          v-model="keyWord"
        />
        <span class="input-group-btn">
          <div class="" @click="searchBall()" type="button">
            &nbsp;&nbsp;
            <button class="btn btn-danger" aria-hidden="true">搜索</button>
          </div>
        </span>
      </div>
    </div>
  </div>
  <br />

  <!-- 表格 -->
  <table class="table">
    <thead>
      <tr>
        <th style="width: 100px">序号</th>
        <th style="width: 200px">球桌</th>
        <th style="width: 200px">球桌名</th>
        <th style="width: 200px">置购时间</th>
        <th style="width: 200px">状态</th>
        <th style="width: 200px">是否损坏</th>

        <th style="width: 400px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="ara in ball" :key="ara.id">
        <!-- //插值 插的是后端得到的属性，和数据库表里对应-->
        <td style="width: 60px">{{ ara.id }}</td>
        <td>
          <img
            :src="ara.image"
            alt="球桌图片"
            :style="{ width: '80px', height: '80px' }"
          />
        </td>
        <td>{{ ara.ballname }}</td>
        <td>{{ ara.buytime }}</td>
        <td>{{ ara.state }}</td>
        <td>{{ ara.broken }}</td>

        <td style="width: 200px">
          <button type="button" @click="addBall()" class="btn btn-success">
            增加
          </button>
          <button type="button" class="btn btn-success" @click="editBall(ara)">
            编辑
          </button>
          <button
            type="button"
            class="btn btn-success"
            @click="deleteBall(ara.id)"
          >
            删除
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
// 安装axios来传后端数据
// npm install axios --save
//导入axios，用它
import { http } from "../../utils/http.js";

// 表格里的数据
export default {
  data() {
    return {
      ball: [],
      keyWord: "",
    };
  },
  created() {
    http
      .get("/getBallList")
      .then((res) => {
        if (res.data) {
          this.ball = res.data;
          console.log(res);
        }
      })
      .catch((error) => {
        // 处理请求错误
        console.error(error);
      });
  },
    methods: {

  // 点击增加时候跳转
  addBall(){
    this.$router.push("/addBall");
  },

  searchBall() {
    // /搜索方法

    http.get("/getBallballname?ballname=" + this.keyWord).then((res) => {
      console.log(this.keyword);
      this.ball = res.data;
    });
  },

    editBall(ara) {
        this.$router.push({
          path: "/updateBall",
          // 把参数带到编辑页面
          query: {
            //将数据格式化一下 JSON.stringify
            BallInfo: JSON.stringify(ara),
          },
        });
      },

      deleteBall(id) {
        //后端传id
        http.get("/deleteBall?id=" + id).then((res) => {
          // console.log(res)
          if (res.status === 200) {
            alert("删除成功");
          } else {
            alert("删除失败");
          }
          // 页面刷新
          this.$router.go(0);
        });
      },
    },
  };

</script>

<style scoped>
</style>